<template>
<div id="company_outline">
	<div class="container">
        <div class="nav">
            <ul>
                <li>
                    <router-link to='/companyInfo' v-if="this.$store.state.common.companyId !== null">{{ $lang("COMPANY_INFO") }}</router-link>
                </li>
                <li class="active">
                    <router-link to='/companyOutline' v-if="this.$store.state.common.companyId !== null">{{$lang("COMPANY_INTRODUCE") }}</router-link>
                </li>
                <li>
                    <router-link to='/financeOutline' v-if="this.$store.state.common.companyId !== null">{{ $lang('FINANCE_SITUATION') }}</router-link>
                </li>
            </ul>
        </div>
		<companyOutline></companyOutline>
		<news></news>
		<financialIndex></financialIndex>
	</div>
</div>
</template>

<script>
import companyOutline from '@/view/CompanyOutline/companyOutline.vue';
import news from '@/view/CompanyOutline/news.vue';
import financialIndex from '@/view/CompanyOutline/financialIndex.vue';
export default {
	data(){
		return {
			
		}
	},
	components:{
		companyOutline,
		news,
		financialIndex
    },
    created() {
        console.log(this.$store.state.common);
        
    }
}
</script>

<style lang="scss">
@import '~assets/scss/company_outline.scss';
// #company_outline{
//     .container{
//         .nav{
//             ul{
//                 display: flex;
//                 align-items: center;
//                 li{
//                     width: 130px;
//                     height: 40px;
//                     line-height: 40px;
//                     text-align: center;
//                     background-color: #1A233E;
//                     border:1px solid rgba(52,78,143,1);
//                     border-bottom: 0;
//                     font-size: 14px;
//                     a{
//                         color: #fff;
//                     }
//                 }
//                 li:last-child{
//                     border-left: 0;
//                 }
//                 .active{
//                     width: 130px;
//                     height: 40px;
//                     line-height: 40px;
//                     text-align: center;
//                     background-color: #4e75d5;
//                     border-right: 0;
//                 }
//             }
//         }
//     }
// }
#company_outline{
    .container{
        .nav{
            margin-bottom: 10px;
            ul{
                display: flex;
                align-items: center;
                li{
                    flex: 1;
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    background-color: #204d74;
                    font-size: 14px;
                    a{
                        color: #fff;
                        display: block;
                    }
                }
                .active{
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    background-color:#286090;
                    border-right: 0;
                }
            }
        }
    }
}
</style>
